<template>
  <view class="fixed-search" :style="{paddingTop: mtStatusBarHeight + 'rpx'}">
    <view class="suffix-icon" @click="handleArrowClick">
      <u-icon name="arrow-left" size="30rpx"/>
    </view>
    <view class="search-input">
      <up-input
          bgColor="#fff"
          :clearabled="true"
          :placeholder="iptPlaceholder"
          shape="circle"
          :customStyle="inputCustomStyle"
          v-model="searchIptVal"
      >
        <template #suffix>
          <u-icon name="search" color="#9B9B9B" size="40rpx" @click="handleSearchIconClick"/>
        </template>
      </up-input>
    </view>
  </view>
</template>
<script setup>
import {defineEmits, defineProps, ref, watch} from "vue";
import {getTitleViewHeight} from "@/utils/utils";
import {onLoad} from "@dcloudio/uni-app";

const props = defineProps({
  searchName: {
    type: String,
    default: ''
  },
  iptPlaceholder: {
    type: String,
    default: ''
  },
})
watch(() => props.searchName, newVal => {
  searchIptVal.value = newVal
})
const inputCustomStyle = {
  backgroundColor: '#fff',
  paddingLeft: '35rpx',
  paddingRight: '28rpx'
}

const mtStatusBarHeight = ref(0)

const emit = defineEmits(['goHonour', 'handleSearchIconClick'])

/**
 * 监听back按钮点击事件
 */
const handleArrowClick = () => {
  emit('arrowClick')
}
const searchIptVal = ref('')

/**
 * 监听搜索按钮点击事件
 */
const handleSearchIconClick = () => {
  emit('handleSearchIconClick', searchIptVal.value)
}


onLoad(() => {
  mtStatusBarHeight.value = getTitleViewHeight()
  searchIptVal.value = props.searchName
})
</script>
<style scoped lang=less>
.fixed-search {
  display: flex;
  /* #ifndef MP-WEIXIN */
  justify-content: space-evenly;
  /* #endif */

  align-items: center;
  width: calc(100% - 40rpx);
  height: 65rpx;
  padding: 0 12rpx 0 28rpx;

  .search-input {
    position: relative;
    /* #ifndef MP-WEIXIN */
    width: 100%;
    /* #endif */

    /* #ifdef MP-WEIXIN */
    width: calc(100% - 250rpx);
    /* #endif */

    .u-input {
      box-shadow: 0 5rpx 13rpx 1rpx rgba(0, 0, 0, 0.05);
    }

    margin-left: 40rpx;
  }
}
</style>
